<template>
	<Input
		v-model="innerValue"
		v-bind="$attrs"
		:suffix-icon="suffixIcon"
		:prefix-icon="prefixIcon"
		v-on="$listeners"
	>
		<template
			v-if="customSlot.prepend"
			#prepend
		>
			{{customSlot.prepend}}
		</template>
		<template
			v-if="customSlot.append"
			#append
		>
			{{customSlot.append}}
		</template>
	</Input>
</template>

<script>
import {Input} from 'element-ui';
export default {
	name:'McInput',
	components:{
		Input,
	},
	props:{
		value:{
			type:String,
			default:'',
		},
		prefixIcon:{
			type:String,
			default:'',
		},
		suffixIcon:{
			type:String,
			default:'',
		},
		customSlot:{
			type:Object,
			default: () => ({
				prepend:'',
				append:'',
			}),
		},
	},
	data(){
		return {
			innerValue:this.value,
		};
	},
	watch:{
		value:{
			handler(val){
				this.innerValue = val;
			},
			immediate:true,
		},
	},
};
</script>

<style lang="scss" scoped></style>